<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf8>
    <style>
      html {
        display: flex;
        font-family: sans-serif;
      }
      body {
        display: flex;
        flex: 1;
        margin: 0;
        padding: 0;
      }
      #container {
        background-color: white;
        bottom: 0;
        display: flex;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
      }
      #logs {
        left: 0;
        position: fixed;
        top: 0;
        white-space: pre;
      }
      #waiting {
        color: #aaa;
        flex: 1;
        font-family: sans-serif;
        padding: 30px;
        text-align: center;
      }

      @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      #connecting-screen {
        display: flex;
        width: 100%;
        padding: 15px;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #333;
        line-height: 1.3;

        /*
        Instead of showing the connecting screen and having it (potentially) be immediately
        replaced, wait a bit. If the inspector hasn't been shown by then, it's a pretty good
        indicator that it won't ever be (without  user action) and we should help them out.
        */
        opacity: 0;
        animation: fade-in 0.25s ease-in 0.5s forwards;
      }
      #connecting-screen-tips {
        text-align: left;
        max-width: 40em;
        margin: 0 auto;
      }
      #loading-status {
        display: block;
        font-size: 12px;
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="connecting-screen">
        <div>
          <h2>
            Waiting for a connection from React
            <!-- The text of this element will be replaced by the devtools -->
            <small id="loading-status"></small>
          </h2>
          <p>
            This should happen pretty quickly. If it hasn't, something's wrong. &#128546;
          </p>
          <h3>Troubleshooting Tips:</h3>
          <ul id="connecting-screen-tips">
            <li>
              If you're using React Native, make sure your app is running and that it's in DEV mode.
            </li>
            <li>
              If you're using React for web, make sure to include the following script tag in your page:
              <pre>&lt;script src="http://localhost:8097">&lt;/script></pre>
            <li>
              Only one element inspector can be active at a time. Close any other open inspectors.
            </li>
            <li>
              There may be a zombie element inspector instance running. Try reopening your Atom
              window or check port 8097.
            </li>
          </ul>
        </div>
      </div>
    </div>
    <script>
      function initializeElementInspector(inspectorDevTools, requirePaths) {
        // The paths used by Atom webviews' `require` aren't what you expect (i.e. they're not
        // based on the file location. Because of this, we pass the paths we want to use from the
        // JS host and patch it. That way, the standalone script will be able to find its
        // dependencies (the "ws" module).
        // See https://github.com/atom/electron/issues/2631 for explanation.
        require.cache[__filename].paths = requirePaths;

        // Start the element inspector.
        require(inspectorDevTools)
          .setContentDOMNode(document.getElementById('container'))
          .startServer();
      }
    </script>
  </body>
</html>
